import React, { useState } from 'react';
import { Search, Trash2, MessageSquare, Plus } from 'lucide-react';
import { Conversation } from '../types';

interface ConversationListProps {
  conversations: Conversation[];
  activeId: string | null;
  searchQuery: string;
  onSearch: (query: string) => void;
  onSelect: (id: string) => void;
  onDelete: (id: string) => void;
  onNewChat: () => void;
}

export function ConversationList({
  conversations,
  activeId,
  searchQuery,
  onSearch,
  onSelect,
  onDelete,
  onNewChat
}: ConversationListProps) {
  const [isDeleting, setIsDeleting] = useState<string | null>(null);

  // 格式化日期时间
  const formatDateTime = (date: Date) => {
    const now = new Date();
    const isToday = 
      date.getDate() === now.getDate() &&
      date.getMonth() === now.getMonth() &&
      date.getFullYear() === now.getFullYear();
    
    if (isToday) {
      // 今天的会话只显示时间
      return new Intl.DateTimeFormat('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      }).format(date);
    } else {
      // 非今天的会话显示日期
      return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).format(date);
    }
  };

  const filteredConversations = conversations.filter(
    convo => convo.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleDeleteClick = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    setIsDeleting(id);
  };

  const handleConfirmDelete = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    onDelete(id);
    setIsDeleting(null);
  };

  const handleCancelDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsDeleting(null);
  };

  return (
    <div className="w-80 h-screen bg-white border-r flex flex-col">
      {/* 顶部搜索和新建 */}
      <div className="p-4 border-b">
        <div className="flex items-center gap-2 mb-4">
          <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
            <MessageSquare className="w-6 h-6 text-blue-600" />
          </div>
          <h1 className="text-xl font-semibold text-gray-800">会话列表</h1>
        </div>
        
        <div className="relative mb-4">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
          <input
            type="text"
            placeholder="搜索会话..."
            className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={searchQuery}
            onChange={(e) => onSearch(e.target.value)}
          />
        </div>
        
        <button
          onClick={onNewChat}
          className="w-full flex items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
        >
          <Plus className="w-4 h-4" />
          <span>新建会话</span>
        </button>
      </div>
      
      {/* 会话列表 */}
      <div className="flex-1 overflow-y-auto">
        {filteredConversations.length > 0 ? (
          <ul className="divide-y">
            {filteredConversations.map((conversation) => (
              <li
                key={conversation.id}
                className={`px-4 py-3 cursor-pointer transition-colors ${
                  conversation.id === activeId ? 'bg-blue-50 border-l-4 border-blue-500' : 'hover:bg-gray-50'
                }`}
                onClick={() => onSelect(conversation.id)}
              >
                <div className="flex justify-between items-start">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center space-x-1">
                      <h3 className="font-medium text-gray-900 truncate">{conversation.title}</h3>
                    </div>
                    {/* 显示时间而不是内容 */}
                    <p className="text-sm text-gray-500 mt-0.5">
                      {formatDateTime(conversation.timestamp)}
                    </p>
                  </div>
                  
                  {isDeleting === conversation.id ? (
                    <div className="flex items-center gap-1">
                      <button
                        onClick={(e) => handleConfirmDelete(e, conversation.id)}
                        className="text-xs bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
                      >
                        确认
                      </button>
                      <button
                        onClick={handleCancelDelete}
                        className="text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded hover:bg-gray-300"
                      >
                        取消
                      </button>
                    </div>
                  ) : (
                    <button
                      onClick={(e) => handleDeleteClick(e, conversation.id)}
                      className="text-gray-400 hover:text-red-500 focus:outline-none"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  )}
                </div>
              </li>
            ))}
          </ul>
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-gray-500 px-4 text-center">
            <MessageSquare className="w-12 h-12 mb-4 text-gray-300" />
            <p>没有找到会话</p>
            <p className="text-sm mt-2">
              {searchQuery ? '尝试使用其他搜索词' : '点击"新建会话"开始聊天'}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}